<template>
  <div class="paramBox">
    <el-cascader
      @change="getParamsList"
      v-model="addinfo"
      :options="catlist"
      :props="{expandTrigger: 'hover', children: 'children', label: 'cat_name', value: 'cat_id'}"
    />

    <el-tabs class="demo-tabs">
      <el-tab-pane label="动态态参数">
        <com-many :list="manyList" :id="addinfo[2]"  @addFinsh="getManyList(addinfo[2])"/>
      </el-tab-pane>
      <el-tab-pane label="静态参数">
         <com-only :list="onlyList" :id="addinfo[2]" @addFinsh="getOnlyList(addinfo[2])" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Only from './components/paramsOnly.vue'
import Many from './components/paramsMany.vue'

export default {
  name: 'oaGoodsAdd',
  data () {
    return {
      addinfo: [1, 3, 6],
      catlist: [],
      manyList: [],
      onlyList: []
    }
  },
  methods: {
    // 获取分类列表
    async getCatList () {
      const res = await this.$http.get('categories', { params: { type: [1, 2, 3] } })
      if (res.meta.status !== 200) return
      this.catlist = res.data
    },
    // 请求参数列表
    getParamsList () {
      const id = this.addinfo[2]
      this.getOnlyList(id)
      this.getManyList(id)
    },
    // 静态参数
    async getOnlyList (id) {
      const onlyList = await this.$http.get(`categories/${id}/attributes`, {
        params: { sel: 'only' }
      })
      if (onlyList.meta.status !== 200) return
      this.onlyList = onlyList.data
    },
    // 动态参数
    async getManyList (id) {
      const manyList = await this.$http.get(`categories/${id}/attributes`, {
        params: { sel: 'many' }
      })
      if (manyList.meta.status !== 200) return
      this.manyList = manyList.data
    }
  },
  created () {
    this.getCatList()
    this.getParamsList()
  },
  components: {
    'com-only': Only,
    'com-many': Many
  }
}
</script>
